<template>
  <view class="component calendar-view">
    <up-datetime-picker :overlay="false" :showToolbar="false" :hasInput="false" :show="true" v-model="_value"
      mode="date" @change="handleChange"  v-bind="computedAttrs"></up-datetime-picker>
  </view>
</template>

<script setup>
import dayjs from 'dayjs';
// 获取透传的属性
const attrs = useAttrs();

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  data: String,
});

const emit = defineEmits(['update:value']);
const _value = ref(props.modelValue);
// const _value = ref(props.data);

// 计算属性，用于合并默认值和透传的属性
const computedAttrs = computed(() => ({
  ...attrs
}));

const handleChange = (v) => {
  const sdate = dayjs(v.value).format('YYYY-MM-DD');
  console.log("🚀 ~ handleChange ~ v:", v, sdate)
  _value.value = sdate;
  emit('update:modelValue', sdate)
}

// watch(() => _value, (v) => {
//   console.log('_value 组件内', v, v.value);

// })

watch(() => props.modelValue, (v) => {
  console.log('监听属性值', v, dayjs(v.value).format('YYYY-MM-DD'));
  _value.value = v;
})
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.calendar-view {
  position: relative;
  z-index: 1;

  .u-popup {
    display: none;
  }
}
</style>